<template>
  <div id="login">
    <el-card id="loginbox">
      <div class="loginitem" id="loginitem">
        <h1>登录</h1>
        <div class="mainbox">
          <form action="" id="LoginForm">
            <div id="username" class="item">
              <input
                type="text"
                name=""
                placeholder="请输入手机号/邮箱"
                id="user"
                class="inputItem"
                ref="username"
              /><br />
            </div>
            <div class="item">
              <input
                type="text"
                name=""
                class="inputItem"
                placeholder="请输入密码"
                id="password"
                ref="password"
              />
            </div>
            <div>
              <input v-model="isAdmins" type="radio" :value="true" />管理员
              <input v-model="isAdmins" type="radio" :value="false" />销售员
            </div>
            <div class="btnItem">
              <button @click.prevent="logins()" id="btn" class="btn">
                登录
              </button>
            </div>
          </form>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("users");

export default {
  data() {
    return { isAdmins: false };
  },

  methods: {
    ...mapActions(["login"]),
    logins() {
      const username = this.$refs.username.value;
      const password = this.$refs.password.value;
      this.login({ username, password, isAdmins: this.isAdmins });
    },
  },
};
</script>


<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
input {
  outline-style: none;
}
#login {
  background: url("../../assets//background.png") no-repeat center center;
  background-size: cover;
  background-color: #0082c9;
  height: 100vh;
  width: 100vw;
  display: grid;
  place-items: center;
  #loginbox {
    width: 500px;
    .mainbox {
      #LoginForm {
        width: 70%;
        margin: 0 auto;
        > div {
          margin: 10px 0;
        }
        .item {
          height: 45px;
          border: 2px solid #d2dce4;
          border-radius: 4px;
          display: flex;
          align-items: center;
          margin: 15px 0px;
        }
        .inputItem {
          width: 100%;
          height: 95%;
          margin-left: 5px;
          border: none;
          outline: none;
          font-size: 17px;
        }
        .btnItem {
          text-align: center;
          margin: 10px 0;
          #btn {
            background-color: white;
            border: 1px solid #d2dce4;
            width: 90px;
            height: 35px;
            border-radius: 8px;
          }
        }
      }
    }
  }
}
</style>